<template>
  <div
    class="electricity"
    style="width: 33%; font-weight: bold; font-size: 16px"
  >
  <span style="font-weight: bold;font-size: 18px">电量区间分布</span>
    <v-chart ref="currentRef"></v-chart>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

// 图表的配置
const currentRef = ref(null);
const renderOption = () => {
  return {
    tooltip: {
      trigger: "item",
    },
    series: [
      // 内圈
      {
        type: "pie",
        radius: ["25%", "85%"],
        roseType: "area",
        label: {
          show: true,
          position: "outside",
          textStyle: {
            fontSize: 16, // 设置标签文字大小
          },
        },
        labelLine: {
          show: true,
          length: 40,
          length2: 40,
        },
        data: [
          { value: 34, name: "极低", itemStyle: { color: "#75b8ff" } }, // 红色
          { value: 12, name: "较低", itemStyle: { color: "#b1ebfb" } }, // 橙色
          { value: 31, name: "中等", itemStyle: { color: "#f8dfaf" } }, // 蓝色
          { value: 48, name: "充足", itemStyle: { color: "#fa9090" } }, // 绿色
        ],
      },
      // 外圈
      {
        type: "pie",
        radius: ["95%", "97%"],
        itemStyle: {
          color: "#000",
          opacity: 0.3,
        },
        tooltip: {
          show: false,
        },
      },
    ],
  };
};
onMounted(() => {
  currentRef.value.setOption(renderOption());
});
window.onresize = () => {
  currentRef.value.resize();
};
</script>

<style lang="scss" scoped>
.electricity {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
</style>